<script setup>
defineProps({
  title: {
    required: true,
    type: String
  },
  src: {
    required: true,
    type: String
  },
  num: {
    required: true,
    type: Number
  }
})
</script>

<template>
  <el-card body-class="my_el_card">
    <div class="box">
      <img :src="src" />
      <div class="card_front">
        <p class="text">{{ title }}</p>
        <p>{{ num }}</p>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.my_el_card {
  img {
    width: 3rem;
    height: 3rem;
    margin: auto 0;
  }
  .card_front {
    height: 3rem;
    margin: auto 0;
    padding-left: 0.5rem;
    .text {
      font-size: 0.9rem;
      font-weight: 600;
      color: #989898;
      text-decoration: underline #555555;
    }
    p {
      margin: 0;
      font-size: 1rem;
      font-weight: bold;
      color: #555555;
    }
  }
  .box {
    display: flex;
    width: 17rem;
    height: 5rem;
  }
}
</style>
